<template>
	<view>
		<star-nav :type="1" :listType="5" title="个人信息" icon="/static/icon-images/user.png"></star-nav>
		<view class="content">
			<userInfo :user="user" class="mt-30" ref="userRef"></userInfo>
			<friends class="mt-30" ref="friendsRef"></friends>
			<tabs @success="handleSuccess" ref="tabsRef" class="mt-30"></tabs>
		</view>
	</view>
</template>

<script>
	import {
		myUser
	} from '@/api/my.js'
	import userInfo from '../my/components/userInfo/index.vue'
	import friends from '../my/components/friends/index.vue'
	import tabs from '../my/components/tabs/index.vue'
	export default {
		components: {
			userInfo,
			friends,
			tabs
		},
		data() {
			return {
				user:{}
			}
		},
		onShow() {
			this.getUser()
			setTimeout(()=>{
				this.getInfo()
			},500)
		},
		methods: {
			async getUser(){
				let res = await myUser()
				this.user = res.data
			},
			getInfo(){
				this.$refs.friendsRef.getContribution()
				this.$refs.userRef.getMyUser()
			},
			handleSuccess(){
				this.getUser()
				this.$refs.userRef.getMyUser()
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100vh;
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	}

	.content {
		padding: 0 30rpx;
	}

	.mt-30 {
		margin-top: 30rpx;
	}
</style>